<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-23 14:23:20
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-24 15:59:23
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\airSeaExpress\components\ConfirmDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-dialog v-model="visible" :title="list.length ? '客户不确认的订单数据' : '提示'" 
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="cancel"
      width="30%">
      <div v-loading="loading">
        <template v-if="list.length">
            <h4>订单号</h4>
            <ul class="listWrapper">
              <li v-for="item in list" :key="item.orderNo">{{item.orderNo}}</li>
            </ul>
            <el-pagination 
            v-if="total > list.length"
            v-model:currentPage="listParams.pageNum"
            v-model:page-size="listParams.pageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 1500]"
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="total"
            ></el-pagination>
            <el-form :model="formData" ref="formRef">
                <el-form-item label="备注（必填项）" prop="remark" :rules="[{required: true, message:'请输入备注', trigger: 'blur'}]">
                    <el-input type="textarea" :rows="2" v-model="formData.remark"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template v-else>
          是否确认？
        </template>
      </div>
      <template #footer>
        <el-button type="info" @click="cancel">取消</el-button>
        <el-button type="primary" :disabled="loading" @click="confirm" :loading="confirmLoading">确认</el-button>
      </template>
    </el-dialog>
</template>

<script setup lang="ts">
  import { ref,reactive,defineEmits } from 'vue'
  import { 
    confirmTheBill, 
    queryAccountDetails, 
  } from '@/api/finance/receiverManange'
  import { ElMessage } from 'element-plus'

  const emits = defineEmits(['success'])
  const formRef = ref()
  const formData = reactive({
     remark:""
  })
  const loading = ref(false)
  const confirmLoading = ref(false)

  const visible = ref(false)
  const list = ref([])

  const listParams = reactive({
    pageNum:0,
    pageSize:10,
    serialNo:""
  })
  const total = ref(0)

  const handleSizeChange = (val: number) => {
    listParams.pageSize = val
  }
  const handleCurrentChange = (val: number) => {
    listParams.pageNum = val
  }

  const getList = () => {
    loading.value = true
    queryAccountDetails(listParams).then(res => {
        if(res?.code === 200 && res?.data?.length){
            list.value = res.data
            total.value = res.total || res.data.length
        }
    }).finally(() => {
      loading.value = false
    })
  }

  const confirm = async () => {

    const params:{
        serialNo:string,
        orderNo?:string,
        remark?:string,
    } = {
       serialNo:listParams.serialNo
    }

    if(list.value.length){
      params.orderNo = list.value.map(i => i.orderNo).join(',')
      params.remark = formData.remark

      await new Promise((resolve, reject) => {
          formRef.value.validate(value => {
             if(value){
              resolve(true)
             }else{
              reject(false)
             }
          })
      })
    }
    confirmLoading.value = true
    confirmTheBill(params).then(res => {
        if(res?.code === 200 ){
          ElMessage.success('操作成功！')
          emits('success')
          cancel()
        }
    }).finally(() => {
        confirmLoading.value = false
    })
     
  }
  
  const cancel = () =>{
    listParams.pageNum = 0
    listParams.pageSize = 10
    list.value = []
    formData.remark = ''
    formRef.value?.resetFields()
    visible.value = false
  }

  const open = (serialNo) => {
    listParams.serialNo = serialNo
    getList()
    visible.value = true
  }


  defineExpose({
     open
  })
</script>

<style lang="less" scoped>
.listWrapper{
   max-height: 220px;
   overflow: auto;
}
</style>